<template>
	<view class='tabbar'>
		<tui-tabbar :tabBar="tabBar" :isFixed="false" :unlined="true" backgroundColor="#F7F7F7" :current="current" hump
			@click="tabbarSwitch"></tui-tabbar>
	</view>
</template>

<script setup>
	import {
		ref,
		defineProps
	} from 'vue';
	import tabbarList from './my-tabbarList.js';
	const props = defineProps({
		current: {
			type: Number,
			required: true,
		},
	});
	const tabBar = ref(tabbarList)
	const current = ref(props.current)


	function tabbarSwitch(e) {
		// console.log(e, 'e')
		current.value = e.index;
		navigate(e.index)
	}

	function navigate(e) {
		const url = tabbarList[e].pagePath;
		// console.log(url , 'url')
		uni.navigateTo({
			url
		})
	}
</script>

<style>
.tabbar {
	position: fixed;
	bottom: 0;
	width: 100%;
}
</style>